<template xmlns:slot="http://www.w3.org/1999/xhtml">
  <div>
    <x-header :left-options="{showBack: false}">首页</x-header>
    <swiper auto style="height: 180px;width: 100%;" dots-position="center">
      <swiper-item class="black"><img src="../assets/banner1.png" style="width: 100%;height: 100%;"></swiper-item>
      <swiper-item class="black"><img src="../assets/banner2.png" style="width: 100%;height: 100%;"></swiper-item>
      <swiper-item class="black"><img src="../assets/banner3.png" style="width: 100%;height: 100%;"></swiper-item>
    </swiper>

    <div>
      <div style="margin: 10px;position: relative;">
        <flexbox @click.native="greet()" class="home-vip right-arrow">
          <flexbox-item :span="3">
            <img src="../assets/cart_sel.png" style="display: block;margin: 0 auto;width: 40px;height: 40px;"/>
          </flexbox-item>
          <flexbox-item :span="7">
            <h4>腾讯会员VIP（15-20天）</h4>
            <p style="color: #888;">单价 <span style="color: DarkOrange;padding-left: 10px;">¥3.90</span></p>
            <p style="color: #888;">库存 <span style="color: DarkOrange;padding-left: 10px;">充足</span></p>
          </flexbox-item>
        </flexbox>
      </div>

      <div style="margin: 10px;position: relative;">
        <flexbox @click.native="greet()" class="home-vip right-arrow">
          <flexbox-item :span="3">
            <img src="../assets/account_sel.png" style="display: block;margin: 0 auto;width: 40px;height: 40px;"/>
          </flexbox-item>
          <flexbox-item :span="10">
            <h4>优酷会员VIP(30天)</h4>
            <p style="color: #888;">单价 <span style="color: DarkOrange;padding-left: 10px;">¥9.90</span></p>
            <p style="color: #888;">库存 <span style="color: DarkOrange;padding-left: 10px;">2</span></p>
          </flexbox-item>
        </flexbox>
      </div>
    </div>


    <tabbar style="position: fixed">
      <tabbar-item selected>
        <img slot="icon" src="../assets/home-normal.png">
        <img slot="icon-active" src="../assets/home-sel.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/order">
        <img slot="icon" src="../assets/cart.png">
        <img slot="icon-active" src="../assets/cart_sel.png">
        <span slot="label">订单</span>
      </tabbar-item>
      <tabbar-item link="/mine">
        <img slot="icon" src="../assets/account.png">
        <img slot="icon-active" src="../assets/account_sel.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import {Swiper, SwiperItem, Tabbar, TabbarItem, Flexbox, FlexboxItem} from 'vux'

  export default {
    name: 'home',
    components: {
      Swiper,
      SwiperItem,
      Tabbar,
      TabbarItem,
      Flexbox,
      FlexboxItem
    },
    data() {
      return {
        list: [{src: './src/assets/banner1.png'}, {src: './src/assets/banner2.png'}]
      }
    },
    methods: {
      select: function () {
        console.log(11111)
        // this.$http.post('http://www.baidu.com').then(data =>{
        //   console.log(data);
        // })
        // this.$wechat.config({
        // })
      },
      greet: function () {
        console.log(1111);
        this.$router.push({name: 'vipDetail'})
      }
    }
  }
</script>

<style scoped>

  .home-vip {
    background-color: #fff;
    width: auto;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #eee;
  }

  .right-arrow::before {
    content: " ";
    display: inline-block;
    height: 9px;
    width: 9px;
    border-width: 1px 1px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 15px;
  }

</style>
